<html>
 
<head>
    <title>element-ui demo</title>
    <meta charset="UTF-8">
 
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 	<link rel="stylesheet" type="text/css" href="/static/css/index/article.css"/>
</head>
 <style type="text/css">
 	.el-header{
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-footer{
  	background-color: #545c64;   
    text-align: center;  
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
 </style>
<body style="margin: 0px;">
    <div id="app" class="page-component__scroll" v-cloak>
    	<el-container>
		  	<el-header>
		  		<el-row>
			  	<el-col :span="14" :offset="5">
			  		<el-row>
			  			<el-col :span="4"><div class="grid-content bg-purple blogtl">CYの博客</div></el-col>
			  				<el-col :span="20">
			  					<div class="grid-content bg-purple-light">
						  			<el-menu
							  			:default-active="activeIndex"
							  			class="el-menu-demo"
							 			mode="horizontal"
							  			@select="handleSelect"
							  			background-color="#545c64"
							  			text-color="#fff"
							  			active-text-color="#ffd04b">
							  			<el-menu-item index="1">首页</el-menu-item>
							  			<el-menu-item index="2">PHP</el-menu-item>
							  			<el-menu-item index="3">前端</el-menu-item>
							  			<el-menu-item index="4">Linux</el-menu-item>
							  			<el-submenu index="5">
							    			<template slot="title">我的工作台</template>
							    			<el-menu-item index="2-1">选项1</el-menu-item>
							    			<el-menu-item index="2-2">选项2</el-menu-item>
							    			<el-menu-item index="2-3">选项3</el-menu-item>
							   				<el-submenu index="2-4">
							      				<template slot="title">选项4</template>
							      				<el-menu-item index="2-4-1">选项1</el-menu-item>
							      				<el-menu-item index="2-4-2">选项2</el-menu-item>
							      				<el-menu-item index="2-4-3">选项3</el-menu-item>
							    			</el-submenu>
							  			</el-submenu>
							  			<el-menu-item index="6" disabled>消息中心</el-menu-item>
							  			<el-menu-item index="7"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>						  
									</el-menu>
			  					</div>
			  				</el-col>
			  			</el-row>			  	
			 	 	</el-col>
				</el-row>			
		  	</el-header>
		  	<el-main class="el-scrollbar_wrap">
		  		<el-row>		  
			  		<el-col :span="14" :offset="5">
			  			<el-row :gutter="20">
						  	<el-col :span="17" >
						  		
						  		<div class="grid-content news" >
						  			<el-card class="box-card" shadow="hover">
									  <div slot="header" class="clearfix">
									    <span ><el-link :underline="false" type="success" href="https://element.eleme.io" target="_blank" style="font-size: 30px;text-align: center;">最适合入门的Laravel中级教程(五)Passport OAuth认证</el-link></span>
									    <div  style="margin-top: 20px;text-align: center;">
									    	<span style=""><i style="font-size: 15px;" class="el-icon-time"></i><span style="margin-left:3px ;font-size: 15px;color: #606266;">2019-11-03 17:39:29</span></span>
									    	<span style="margin-left: 30px;"><i style="font-size: 15px;" class="el-icon-s-unfold"></i><span style="margin-left:3px ;font-size: 15px;"><a href="" style="text-decoration:none;color:#409EFF ;">Linux</a></span></span>
									    <span style="margin-left: 30px;"><i style="font-size: 15px;" class="el-icon-price-tag"></i><span style="margin-left:3px ;font-size: 15px;"><a href="" style="text-decoration:none;color:#409EFF ;">php</a></span></span>
									    </div>
									    
									  </div>
									  
									  <div  class="text item" style="line-height: 35px;">
									    		经过前面 OAuth 系列 和 JWT(JSON Web Token) 的铺垫; 
												终于可以开始本篇 Laravel 教程了； 
												如果对 OAuth 和 JWT 还不是很了解； 
												建议先出门左转阅读上面链接中的系列文章；
												
												我们先来回顾一下之前讲的 OAtuh 的四个角色；
												
												资源服务器(resource server)：github 服务器
												授权服务器(authorization server)：github 服务器
												资源所有者(resource owner)：用户你
												客户端(client)：第三方白俊遥博客
												资源服务器(resource server)和授权服务器(authorization server)我们统称为 server ； 
												server 提供 OAuth 的认证服务； 
												client 则是使用 OAauth 服务； 
												在 PHP 社区中有一个以开发高质量扩展包著称的组织 league ; 
												他们提供了两个扩展包 oauth2-server 和 oauth2-client ; 
												分别实现了 server 和 client 服务； 
												Laravel 官方在 oauth2-client 的基础上开发了 socialite 用于实现 OAuth 第三方登录功能； 
												在 oauth2-server 基础上开发了 Passport 用于实现 OAuth 的认证服务；
												
												Passport 提供了以下功能：
												
												管理 clients
												OAuth 的四种授权类型
												个人访问令牌 (personal access tokens)
												管理令牌作用域 (scope)
												铺垫完毕下面正式进入 Passport 环节； 
												Passport 默认没有安装； 
												使用前需要先 require 引入包；						    
									  </div>
									  
									</el-card>
						  		</div>
						  	</el-col>
						  	<el-col :span="7">
						  		<div >
								  <el-input placeholder="请输入内容" v-model="input2">
								    <el-button slot="append" icon="el-icon-search"></el-button>
								  </el-input>
								</div>
								
								<div class="grid-content bg-purple-light" style="margin-top: 15px;">
									<el-card class="box-card" shadow="hover">
									  <div  class="text item" style="font-size: 16px;color: #303133;">
									    	热门标签
									  </div>
									  <div  class="text item tags">
									    	<a href=""><el-tag >PHP（15）</el-tag></a>
											<el-tag type="success">Linux（3）</el-tag>
											<el-tag type="info">标签三</el-tag>
											<el-tag type="warning">标签四</el-tag>
											<el-tag type="danger">标签五</el-tag>
									  </div>
									</el-card>
								</div>
								
								<div class="grid-content bg-purple-light" style="margin-top: 15px;">
									<el-card class="box-card" shadow="hover">
									  <div  class="text item" style="font-size: 16px;color: #303133;">
									    	置顶推荐
									  </div>
									  <div  class="text item newlist">
									     <el-link type="primary" icon="el-icon-notebook-2">Docker 入门教程(一)概念</el-link>
									  </div>
									  <div  class="text item ">
									    <el-link type="primary" icon="el-icon-notebook-2">Docker 入门教程(二)镜像 Image</el-link>
									  </div>
									  <div  class="text item ">
									    <el-link type="primary" icon="el-icon-notebook-2">Docker 入门教程(三)容器 Container入门教程(三)容器</el-link>
									  </div>
									</el-card>
								</div>
								
								<div class="grid-content bg-purple-light" style="margin-top: 15px;">
									<el-card class="box-card" shadow="hover">
									  <div  class="text item" style="font-size: 16px;color: #303133;">
									    	友情链接
									  </div>
									  <div  class="text item newlist">
									     <el-link type="info" icon="el-icon-link">Laravel学院</el-link>
									  </div>
									  <div  class="text item ">
									    <el-link type="info" icon="el-icon-link">Thinkphp</el-link>
									  </div>
									  <div  class="text item ">
									    <el-link type="info" icon="el-icon-link">极墨科技</el-link>
									  </div>
									</el-card>
								</div>
						  	</el-col>
						</el-row>
			  		</el-col>
			  		<el-col :span="5">
			  			<template>
						 	<el-backtop target=".page-component__scroll"></el-backtop>
						</template>
			  		</el-col>
				</el-row>
		  	</el-main>
		  
		  	<el-footer :height="250">
		  		<el-row >
				  <el-col :span="16" :offset="5">
				  	<el-row>
					  <el-col :span="8">
					  	<div class="grid-content  bg-purple" style="color: #909399;font-size: 14px;text-align: left;">
					  		<div style="font-size: 19px;margin-top: 40px;font-weight: 700;">权益</div>
					  		<div style="margin-top: 10px;">许可协议：CC BY-NC 4.0</div>
					  		<div style="margin-top: 5px;">版权所有：© 2019-2019 echocy.com</div>
					  		<div style="margin-top: 5px;">联系邮箱：823943303@qq.com</div>
					  		<div style="margin-top: 5px;">ICP 备案：冀ICP备14009546号-3</div>
					  	</div>
					  </el-col>
					  <el-col :span="8">
					  	<div class="grid-content  bg-purple" style="color: #909399;font-size: 14px;text-align: left;">
					  		<div style="font-size: 19px;margin-top: 40px;font-weight: 700;">架构</div>
					  		<div style="margin-top: 10px;">运行环境：LNMP</div>
					  		<div style="margin-top: 5px;">后端框架：Thinkphp 6</div>
					  		<div style="margin-top: 5px;">前端框架：Vue.js</div>
					  		<div style="margin-top: 5px;">前端UI：Element</div>
					  		<div style="margin-top: 5px;">项目作者：CY</div>
					  		<div style="margin-top: 5px;">服务器提供商：腾讯云</div>
					  	</div>
					  </el-col>
					  <el-col :span="8">
					  	<div class="grid-content  bg-purple" style="color: #909399;font-size: 14px;text-align: left;">
					  		<div style="font-size: 19px;margin-top: 40px;font-weight: 700;">统计</div>
					  		<div style="margin-top: 10px;">运行天数：326</div>
					  		<div style="margin-top: 5px;">文章总数：193</div>
					  		<div style="margin-top: 5px;">友情链接：3</div>
					  		
					  	</div>
					  </el-col>
					</el-row>
				  </el-col>
				</el-row>
		  		
		  	</el-footer>
		</el-container>
        
    </div>
 
    
    
    
    
 
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 
    <script>
 
        new Vue({
            el: '#app',
            data: function () {
                return {
                    visible: false,
                    activeIndex: '1',
        			url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',                    
                }
            },
            methods: {
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			      }
            },
            components: {
                menutree: {
                    template: '#menutree',
                    props: ['data'],
                    name:'menutree'
                }
            }
        })
    </script>
</body>
 
</html>
